<script setup lang="ts">
import { Plus, Search } from 'lucide-vue-next';

const emit = defineEmits<{
  (e: 'search', value: string): void;
  (e: 'add'): void;
}>();

const name = ref<string>();

function handleSearch() {
  if (name.value) {
    emit('search', name.value);
  }
}
function handleAdd() {
  emit('add');
}
</script>

<template>
  <div class="flex items-center justify-between">
    <div class="flex flex-1 items-center space-x-2">
      <Input
        v-model="name"
        placeholder="请输入姓名"
        class="h-8 w-[150px] lg:w-[250px]"
      />

      <Button
        variant="default"
        class="h-8 px-2 lg:px-3"
        @click="handleSearch"
      >
        搜索
        <Search class="ml-1 h-4 w-4" />
      </Button>
    </div>

    <Button
      variant="default"
      class="h-8 px-2 lg:px-3"
      @click="handleAdd"
    >
      新增
      <Plus class="ml-1 h-4 w-4" />
    </Button>
  </div>
</template>
